import { ProFormText, ProForm, ProFormDependency } from '@ant-design/pro-components';
import type { ProFormInstance } from '@ant-design/pro-components';
import getProFileData from '../../getProFileData';

const eumLabel = {
  productIdEx: '产品ID扩展属性',
  productIdRuleEx: '产品规则ID扩展属性',
  productIdBackupEx: '后备产品码扩展属性',
};
const eumTip = {
  productIdEx: '既优惠商品',
  productIdRuleEx: '既条件商品',
  productIdBackupEx: '既优惠商品备键',
};

type Props = {
  formRef: ProFormInstance | any;
  fatherName: string;
};

const ExtendedAtt: React.FC<Props> = ({ formRef, fatherName }) => {
  const { OptionsTenantListUniq = [], formValue } = getProFileData();
  const { productKey = 0 } = formValue;

  const disabledFlag = productKey !== 0;

  const getLabelByUniq = (value: string) => {
    let str = '';
    OptionsTenantListUniq.forEach((item: any) => {
      if (item.id === value) {
        str = item.name;
      }
    });
    return str;
  };

  // 根据inputFlag属性确定是否需要
  const showInputList = (tenantList: string[]) => {
    const listBro: string[] = [];
    OptionsTenantListUniq.forEach((item: any) => {
      if (tenantList && tenantList.includes(item.id) && item.inputFlag) {
        listBro.push(item.id);
      }
    });
    return listBro;
  };

  return (
    <>
      <ProFormDependency name={['tenantFather', 'tenantList']}>
        {({ tenantFather, tenantList }) => {
          const tenantListBro = showInputList(tenantList);
          if (tenantListBro && tenantListBro.length > 0) {
            return (
              <ProForm.Group>
                <div style={{ width: 1000, height: 'auto' }}>
                  <h3>
                    {eumLabel[fatherName]}&nbsp;&nbsp;
                    <span style={{ fontSize: 12, color: '#92908e' }}>{eumTip[fatherName]}</span>
                  </h3>
                  <div style={{ marginTop: 24 }}>
                    {tenantListBro.map((item: string, index: number) => (
                      <ProFormText
                        disabled={disabledFlag}
                        key={index}
                        labelCol={{ span: 8 }}
                        width={700}
                        name={[fatherName, item]}
                        label={getLabelByUniq(item)}
                        placeholder="请输入"
                      />
                    ))}
                  </div>
                </div>
              </ProForm.Group>
            );
          }
          return null;
        }}
      </ProFormDependency>
    </>
  );
};

export default ExtendedAtt;
